<template>
  <el-form
    ref="formRef"
    :model="form"
    status-icon
    :rules="rules"
    label-width="120px"
    class="myform"
  >
    <el-form-item label="手机号" prop="phone">
      <el-input
        :prefix-icon="Iphone"
        clearable
        v-model="form.phone"
        placeholder="手机号"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <el-row>
        <el-col :span="12">
          <el-input
            :prefix-icon="Headset"
            clearable
            v-model="form.captcha"
            placeholder="验证码"
            type="text"
            autocomplete="off"
          />
        </el-col>
        <el-col :span="11" :offset="1">
          <el-button
            v-if="flag"
            :disabled="!disabled"
            type="primary"
            @click.stop="sendCaptcha"
            >发送验证码</el-button
          >
          <el-button v-else disabled> 剩余 {{ count }} S</el-button>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item class="lastitem">
      <div class="alinks">
        <router-link to="/register" class="litem">去注册</router-link>
        <router-link to="/findpass" class="litem bg">忘记密码</router-link>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button
        type="success"
        class="btnblock"
        @click.stop.enter="submitData()"
        >登录</el-button
      >
      <el-button type="danger" class="btnblock" @click.stop="resetForm()"
        >重置</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
export type strType = string | number | boolean; //声明数据类型
import { User, Lock, Iphone, Headset } from "@element-plus/icons-vue";
import { reg } from "@/utils/validate";
import { useRoute, useRouter } from "vue-router"; // useRoute 获取路由参数  useRouter 路由跳转
import { Ajax } from "@/api";
import { ShowErrorMsg } from "@/utils";
let timer: any = null;
const formRef = ref<any>();
const form = reactive<any>({});
const route = useRoute();
const router = useRouter();
const count = ref(30);
const flag = ref(true);
const disabled = computed(() => {
  return reg.phone.test(form.phone); //如果手机号没有通过校验，发送验证码的按钮就不可使用
});
const rules = reactive<any>({
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: reg.phone,
      message: "请输入正确格式的手机号码",
      trigger: "blur",
    },
  ],
  captcha: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
    {
      pattern: reg.code,
      message: "请输入四位数字验证码",
      trigger: "blur",
    },
  ],
});
// 发送验证码
const sendCaptcha = async () => {
  timeDown();
  let res = await Ajax.getcaptcha({
    phone: form.phone,
  });
};

const timeDown = () => {
  count.value--;
  flag.value = false;
  timer = setInterval(() => {
    if (count.value > 0) {
      count.value--;
      flag.value = false;
    } else {
      count.value = 30;
      flag.value = true;
      clearInterval(timer);
      timer = null;
    }
  }, 1000);
};

const submitData = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      //手机号和验证码通过校验
      let res: any = await Ajax.checkcaptcha(form);
      if (res.code == 200) {
        localStorage.setItem("yq_account", res.result.username);
        localStorage.setItem("yq_phone", form.phone);
        sessionStorage.setItem("yq_token", res.token); //token存的位置不一样
        router.push({ name: "main" });//main页面和路由还没写
      }
    } else {
      ShowErrorMsg("校验失败");
    }
  });
};

const resetForm = () => {
  formRef.value.resetFields();
};

onUnmounted(() => {
  clearInterval(timer);
  timer = null;
});
</script>

<style></style>
